<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji Kitchen</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #emojiOutput {
            font-size: 24px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Emoji Kitchen</a>
    </nav>

    <div class="container my-5">
        <div class="row">
            <div class="col-12 text-center">
                <h1 class="mb-4">Emoji Kitchen</h1>
                <textarea id="textInput" class="form-control mb-3" rows="4" placeholder="Type your text here..."></textarea>
                <button class="btn btn-primary" onclick="generateEmojiText()">Generate Emoji Text</button>
                <div id="emojiOutput" class="mt-4"></div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-12">
                <h2>About Emoji Kitchen</h2>
                <p>Emoji Kitchen is a fun tool that allows users to blend standard text with a variety of emojis to create engaging, visually rich content. Emojis, which are small digital icons or images used to represent emotions, ideas, or objects, can be combined with text to make communication more expressive and creative. By using Emoji Kitchen, you can transform your messages, social media posts, and other digital communications into something unique and entertaining.</p>
                <p>If you're looking for more advanced tools, check out <a href="https://fromtotools.com" rel="dofollow">FromToTools</a>. They offer an <a href="https://fromtotools.com/text-generator/emoji-text-generator" rel="dofollow">Emoji Text Generator</a> that can help you create even more intricate emoji-enhanced text.</p>
            </div>
        </div>
    </div>

    <footer class="bg-light py-4 mt-5">
        <div class="container text-center">
            <p>&copy; 2024 Emoji Kitchen. All Rights Reserved.</p>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="emojiGenerator.js"></script>
</body>
</html>
